<template>
  <div style="margin: auto; width: 90%; margin-top: 3%">
    <el-form :model="form" label-width="10%" :rules="rules">
      <el-form-item label="菜品名称:" prop="name">
        <el-input
          placeholder="请输入账号"
          v-model="form.name"
          class="el-input"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜品分类:" prop="categoryId">
        <el-select
          v-model="form.categoryId"
          placeholder="请选择"
          class="el-input"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜品价格:" prop="price">
        <el-input
          placeholder="请输入手机号"
          v-model="form.price"
          class="el-input"
        ></el-input>
      </el-form-item>
      <el-form-item label="口味做法配置:">
        <el-button type="primary">+添加口味</el-button>
      </el-form-item>
      <el-form-item label="菜品图片:" prop="image">
        <el-upload class="avatar-uploader" action="" :show-file-list="false">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="菜品描述" prop="description">
        <el-input
          class="el-input"
          type="textarea"
          v-model="form.description"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button @click="cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.el-input {
  width: 25%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script>
import { getCategory } from "@/api/dish";
import router from "@/router";
import { options } from "runjs";

export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请填写菜品名称", tigger: "change" }],
        categoryId: [
          { required: true, message: "请选择菜品分类", tigger: "change" },
        ],
        price: [
          { required: true, message: "请填写菜品价格", tigger: "change" },
        ],
        image: [{ required: true, message: "请上传图片", tigger: "change" }],
      },
      options: {},
      form: {
        categoryId: "",
        code: "",
        description: "",
        flavors: [],
        image: "",
        name: "",
        price: "",
        status: 1,
      },
      imageUrl: "",
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    // 获取分类
    async getCategoryList() {
      const list = await getCategory({ type: 1 });
      console.log(list);

      this.options = list.data;
      console.log(this.options);
    },
    // 取消添加
    cancle() {
      router.push("/backend/dish");
    },
    // 保存
    submitForm() {
      console.log(this.form.categoryId);
    },
  },
};
</script>